<template>
  <el-form ref="questionForm" :model="question" :rules="rules" label-width="120px" status-icon>
    <el-form-item label="所属题目分类" prop="cateId1">
      <el-input v-model="question.cateId1" placeholder="一级分类ID"></el-input>
      <el-input v-model="question.cateId2" placeholder="二级分类ID"></el-input>
      <el-input v-model="question.cateId3" placeholder="三级分类ID"></el-input>
    </el-form-item>
    <el-form-item label="题目名称" prop="name">
      <el-input v-model="question.name" placeholder="请输入题目名称"></el-input>
    </el-form-item>
    <el-form-item label="答案解析" prop="analysis">
      <el-input
          type="textarea"
          v-model="question.analysis"
          placeholder="请输入答案解析">
      </el-input>
    </el-form-item>
    <el-form-item label="题目类型" prop="type">
      <el-select v-model="question.type" placeholder="请选择题目类型">
        <el-option label="单选题" value="1"></el-option>
        <el-option label="多选题" value="2"></el-option>
        <el-option label="判断题" value="3"></el-option>
        <el-option label="简答题" value="4"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="难易程度" prop="difficulty">
      <el-select v-model="question.difficulty" placeholder="请选择难易程度">
        <el-option label="简单" value="1"></el-option>
        <el-option label="中等" value="2"></el-option>
        <el-option label="困难" value="3"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="所属课程" prop="course">
      <el-input v-model="question.course" placeholder="请输入所属课程"></el-input>
    </el-form-item>
    <el-form-item label="分值" prop="score">
      <el-input v-model="question.score" placeholder="请输入分值"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { addQuestion, updateQuestion } from "@/api/exam/question.js";


const question = reactive({
  cateId1: '',
  cateId2: '',
  cateId3: '',
  name: '',
  type: '',
  difficulty: '',
  analysis: '',
  course: '',
  score: ''
});

const questionForm = ref(null);


const rules = {
  name: [
    { required: true, message: '题目名称不能为空', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '题目类型不能为空', trigger: 'change' }
  ],
  difficulty: [
    { required: true, message: '难易程度不能为空', trigger: 'change' }
  ],
  course: [
    { required: true, message: '所属课程不能为空', trigger: 'blur' }
  ],
  score: [
    { required: true, message: '分值不能为空', trigger: 'blur' }
  ]
};

function submitForm() {
  questionForm.value.validate(valid => {
    if (valid) {
      if (question.id != null) {
        updateQuestion(question).then(response => {
          alert("修改成功");
          resetForm();
        });
      } else {
        addQuestion(question).then(response => {
          alert("新增成功");
          resetForm();
        });
      }
    }
  });
}

function resetForm() {
  question.cateId1 = '';
  question.cateId2 = '';
  question.cateId3 = '';
  question.name = '';
  question.type = '';
  question.difficulty = '';
  question.analysis = '';
  question.course = '';
  question.score = '';
  questionForm.value.resetFields();
};
</script>

<style scoped>
/* 可以在这里添加一些样式 */
</style>
